<template>
  <div class="page-container">
    <!-- 顶部标题 -->
    <div class="header">
       <button class="back-button" @click="goBack" title="返回">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="header-content">
            <h1>历史记录</h1>
        </div>
        <!-- Placeholder to balance the back button -->
        <div class="header-placeholder"></div>
    </div>

    <!-- 历史记录列表区域 -->
    <div class="content">
      <div v-if="historyRecords.length === 0" class="no-records">
        暂无历史记录
      </div>
      <div v-else class="history-list">
        <div v-for="(record, index) in historyRecords" :key="index" class="history-item">
          <span class="record-date">{{ record.date }}</span>
          <button class="view-button" @click="viewRecord(record)">
            查看当天记录
          </button>
        </div>
      </div>
    </div>

    <!-- 底部导航组件 -->
    <navigation :active-tab="activeTab" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import Navigation from '@/components/Navigation.vue';
import axios from 'axios'; // 导入 axios
import { getItem } from '@/components/Session.vue';

export default {
  components: {
    Navigation
  },
  setup() {
    const router = useRouter();
    const activeTab = ref('advice'); // 底部导航栏的活动标签
    const historyRecords = ref([]); // 存储历史记录列表
    const isLoading = ref(false); // 添加加载状态
    const errorMsg = ref(''); // 添加错误消息状态

    // --- API 请求 --- 

    const user = getItem("user")
    // 异步函数：获取历史记录列表
    const fetchHistoryRecords = async () => {
      isLoading.value = true; // 开始加载，设置加载状态为 true
      errorMsg.value = ''; // 清除之前的错误信息
      historyRecords.value = []; // 清空旧数据
      console.log("开始获取历史记录列表...");

      try {
        // 1. 准备请求参数
        const params = {
          username: user.username
        };
        // 2. 定义 API 端点
        const apiUrl = 'api/daily/suggest/get';
        // 3. 发起 GET 请求
        const response = await axios.get(apiUrl, { params });
        // 4. 处理响应
        if (response.data.code === 200 && response.data.data) {
          

          if (Array.isArray(response.data.data)) {
            // 处理日期格式，将UTC时间转换为本地日期
            historyRecords.value = response.data.data.map(item => {
              // 将UTC时间转换为本地时间
              const utcDate = new Date(item.day);
              // 获取本地时区偏移（分钟）
              const timezoneOffset = utcDate.getTimezoneOffset();
              // 转换为本地时间
              const localDate = new Date(utcDate.getTime() - timezoneOffset * 60000);
              // 格式化为YYYY-MM-DD
              const formattedDate = localDate.toISOString().split('T')[0];
              
              return {
                date: formattedDate, // 使用转换后的本地日期
                data: JSON.stringify([item.diet, item.rest, item.sports]) // 将建议内容转换为字符串，用于路由传递
              };
            });
            console.log("成功获取历史记录列表:", historyRecords.value);
            if (historyRecords.value.length === 0) {
              console.log("历史记录为空。");
            }
          } else {
            console.error('获取历史记录失败: API返回的数据格式不是预期的数组', response.data.data);
            errorMsg.value = '加载数据格式错误';
          }
        } else {
          console.error('获取历史记录失败:', response.data.message || 'API返回未知错误');
          errorMsg.value = response.data.message || '加载失败';
        }
      } catch (error) {
        console.error('请求历史记录 API 时出错:', error);
        errorMsg.value = '网络错误，请稍后重试';
      } finally {
        isLoading.value = false; // 请求结束（无论成功或失败），设置加载状态为 false
        console.log("获取历史记录列表结束。");
      }
    };

    // --- 导航与交互 --- 

    // 查看特定日期的记录
    const viewRecord = (record) => {
      // 检查传入的 record 对象以及其 date 属性是否有效
      if (record && record.date) { 
        console.log(`[导航] 准备跳转到日期 ${record.date} 的建议页面`);
        
        // 使用 Vue Router 进行跳转，同时传递日期和对应的建议数据
        router.push({ 
          path: '/healthadvice', 
          query: { 
            data: record.data // 将数据作为路由参数传递
          }
        });
      } else {
        console.error('[导航] 无法跳转：记录数据无效或缺少日期', record);
      }
    };

    // 返回上一页或指定页面
    const goBack = () => {
      // 优先尝试返回浏览器历史记录的上一页
      if (window.history.length > 1) {
           console.log('返回浏览器历史记录的上一页');
           router.go(-1); 
       } else {
           // 如果没有历史记录，则导航到主建议页面
           console.log('无历史记录，返回主建议页面');
           router.push('/advice'); // 默认返回主建议页
       }
    };

    // --- 生命周期钩子 --- 

    // 组件挂载后执行
    onMounted(() => {
      console.log('AdiviceHistoyRecordView 组件已挂载');
      // 获取历史记录列表
      fetchHistoryRecords();
    });

    // --- 返回给模板的数据和方法 --- 
    return {
      activeTab,
      historyRecords,
      isLoading, // 返回加载状态，可以在模板中使用 (例如显示加载指示器)
      errorMsg,  // 返回错误信息，可以在模板中显示
      viewRecord,
      goBack,
      fetchHistoryRecords // 如果需要下拉刷新等功能，也暴露此方法
    };
  }
}
</script>

<style scoped>
/* Reuse styles from HealthAdivice.vue where applicable */
.page-container {
  min-height: 100vh;
  max-width: 100vw;
  width: 100%;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  padding-bottom: 15vw; /* Match Navigation height */
  box-sizing: border-box;
}

.header {
  background: linear-gradient(135deg, #4CAF50, #2196F3);
  color: white;
  padding: 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
}

.back-button {
  background: none;
  border: none;
  color: white;
  font-size: 5vw;
  cursor: pointer;
  padding: 2vw;
  margin-left: -2vw;
  line-height: 1;
  min-width: 10vw; /* Ensure minimum tap area */
}

.back-button:hover {
  opacity: 0.8;
}

.header-content {
  text-align: center;
  flex-grow: 1;
}

.header-content h1 {
  font-size: 4.5vw;
  margin: 0;
  font-weight: 600;
}

.header-placeholder {
  width: 10vw; /* Match back-button width */
  visibility: hidden; /* Use visibility hidden to maintain layout space */
}


.content {
  flex: 1;
  padding: 4vw;
  overflow-y: auto;
}

.no-records {
  text-align: center;
  color: #666;
  font-size: 3.5vw;
  padding-top: 10vw;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 3vw; /* Spacing between items */
}

.history-item {
  background: white;
  border-radius: 3vw;
  padding: 3vw 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
}

.history-item:hover {
   background-color: #f0f0f0; /* Slight hover effect */
}

.record-date {
  font-size: 3.8vw;
  color: #333;
  font-weight: 500;
}

.view-button {
  background-color: #4CAF50; /* Green button */
  color: white;
  border: none;
  border-radius: 1.5vw;
  padding: 1.5vw 3vw;
  font-size: 3.2vw;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.view-button:hover {
  background-color: #45a049; /* Darker green */
}

.view-button:active {
    transform: scale(0.98); /* Click effect */
}


/* Responsive Adjustments (similar to HealthAdivice) */
@media screen and (max-width: 320px) {
  .page-container {
    padding-bottom: 18vw;
  }
  .header {
      padding: 3vw;
  }
  .back-button {
      font-size: 6vw;
  }
  .header-content h1 {
      font-size: 5vw;
  }
  .header-placeholder {
      width: 12vw;
  }
  .content {
    padding: 3vw;
  }
  .history-item {
    padding: 2.5vw 3vw;
    border-radius: 2.5vw;
  }
  .record-date {
      font-size: 3.5vw;
  }
   .view-button {
      padding: 1.2vw 2.5vw;
      font-size: 3vw;
      border-radius: 1.2vw;
  }
  .no-records {
      font-size: 3.2vw;
  }
}

/* 可以添加加载状态和错误信息的样式 */
.loading-indicator, .error-message {
  text-align: center;
  padding: 5vw 0;
  color: #666;
  font-size: 3.5vw;
}

.error-message {
  color: #EF4444; /* 危险色 */
}
</style>
